﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebPro8._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
  
 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<meta name="description" content="Caracole" /> 
	<title>Titanium</title> 
	<link href="favicon.ico" type="image/x-icon" rel="icon" /> 
	<link href="favicon.ico" type="image/x-icon" rel="shortcut icon" /> 
<%--	<link rel="stylesheet" type="text/css" href="css/fullscreen_preview.css" /> --%>
	<link rel="stylesheet" type="text/css" href="css/tripoli.simple.css" media="screen, projection, print" /> 
	<link rel="stylesheet" type="text/css" href="css/layout.css" media="screen, projection, print" /> 
 	<script type="text/javascript"> 
		//<![CDATA[
		document.write('<link rel="stylesheet" type="text/css" href="css/js/js.css" media="screen, projection, print" />');
		//]]>
	</script> 
	<!--[if IE]>
		<link rel="stylesheet" type="text/css" href="css/ie/ie.css" media="screen, projection, print" />
	<![endif]--> 
	<!--[if lt IE 7]>
	<script src="js/DD_belatedPNG_0.0.7a-min.js" type="text/javascript"></script>
	<script>
		DD_belatedPNG.fix(' #header, h1, h1 a, .close, .field,.paginate .current, .icon, .required-icon, .search input');
	</script>
	<link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="screen, projection"/>
	<![endif]--> 
 
</head>
<body>
    <form id="form1" runat="server">
    <!-- Header --> 
<div id="header"> 
	<div class="container content"> 
		<h1><a href="/index.php" title="Back to home">Titanium</a></h1> 
		<a href="http://www.pixelastic.com/" target="_blank" class="viewWebsite"><span>View website</span></a> 
		<div class="loginInfos"> You're logged in as <strong>Admin</strong>. <a href="#" title="Edit your settings">Edit your settings</a>, or <a href="#" title="Log out">Log out</a> </div> 
	</div> 
</div> 
<!-- /Header --> 
 
<!-- Global --> 
<div id="page-content"> 
	<div class="container content"> 
		<!-- Sidebar --> 
		<div id="sidebar" class="bImg"> 
			<div class="bInner"><span class="bTR"></span><span class="bBL"></span> 
				<ul id="side-nav"> 
					<li class="active"> 
						<a href="#" title="Posts" class="button"> 
							<strong> 
								<img src="img/newspaper_48.png"alt="comments" class="icon "/> 
								<span class="title">Posts</span> 
								<span class="expand expanded"></span>				
							</strong> 
						</a> 
						<ul> 
							<li><a href="#" title="Add post">Add post</a></li> 
							<li class="active"><a href="#" title="Edit posts">Edit posts</a></li> 
							<li><a href="#" title="Manage categories">Manage categories</a></li> 
							<li><a href="#" title="Manage tags">Manage tags</a></li> 
						</ul> 
					</li> 
					<li class="inactive"> 
						<a href="#" title="Pages" class="button "> 
							<strong> 
								<img src="img/paper_content_48.png" alt="comments" class="icon "/> 
								<span class="title">Pages</span> 
								<span class="expand"></span> 
							</strong> 
						</a> 
						<ul> 
							<li><a href="#" title="Lorem">Lorem</a></li> 
							<li><a href="#" title="Ipsum dolor">Ipsum dolor</a></li> 
							<li><a href="#" title="Sit amet elit">Sit amet elit</a></li> 
						</ul> 
					</li> 
					<li class="inactive"> 
						<a href="#" title="Pages" class="button"> 
							<strong> 
								<img src="img/image_48.png" alt="media" class="icon "/> 
								<span class="title">Media</span> 
								<span class="expand"></span> 
							</strong> 
						</a> 
						<ul> 
							<li><a href="#" title="Lorem">Lorem</a></li> 
							<li><a href="#" title="Ipsum dolor">Ipsum dolor</a></li> 
							<li><a href="#" title="Sit amet elit">Sit amet elit</a></li> 
						</ul> 
					</li> 
					<li class="inactive"> 
						<a href="#" title="Pages" class="button"> 
							<strong> 
								<img src="img/comment_48.png" alt="comments" class="icon "/> 
								<span class="title">Comments</span> 
								<span class="expand"></span> 
							</strong> 
						</a> 
						<ul> 
							<li><a href="#" title="Lorem">Lorem</a></li> 
							<li><a href="#" title="Ipsum dolor">Ipsum dolor</a></li> 
							<li><a href="#" title="Sit amet elit">Sit amet elit</a></li> 
						</ul> 
					</li> 
					<li class="inactive"> 
						<a href="#" title="Pages" class="button"> 
							<strong> 
								<img src="img/spanner_48.png" alt="comments" class="icon "/> 
								<span class="title">Settings</span> 
								<span class="expand"></span> 
							</strong> 
						</a> 
						<ul> 
							<li><a href="#" title="Lorem">Lorem</a></li> 
							<li><a href="#" title="Ipsum dolor">Ipsum dolor</a></li> 
							<li><a href="#" title="Sit amet elit">Sit amet elit</a></li> 
						</ul> 
					</li> 
				</ul> 
			</div> 
		</div> 
		<!-- /Sidebar --> 
 
 
		<!-- Content --> 
		<div id="content" class="roundedBorders"> 
			<!-- Title --> 
			<div id="title" class="b2"> 
				<h2>Edit Posts</h2> 
				<!-- TitleActions --> 
				<div id="titleActions"> 
					<!-- ListSearch --> 
					<div class="listSearch actionBlock"> 
						<div class="search"> 
							<label for="search">Recherche</label> 
							<input type="text" name="search" id="search" class="text" /> 
						</div> 
						<div class="submit"> 
							<button type="submit" id="search-button" class="button"><strong><img src="img/search_48.png" alt="comments" class="icon "/></strong></button> 
						</div> 
					</div> 
					<!-- /ListSearch --> 
					<!-- newPost --> 
						<div class="newPost actionBlock"> 
							<a href="#" class="button"><strong>New post<img src="img/add_48.png" alt="new post" class="icon "/></strong></a> 
						</div> 
					<!-- /newPost --> 
				</div> 
				<!-- /TitleActions --> 
			</div> 
			<!-- Title --> 
 
			<!-- Toolbar actions --> 
			<div id="toolbarActions"> 
				<p>Quick links: </p> 
				<ul> 
					<li><a href="#" class="tooltip"><strong>Comments (3)</strong></a></li> 
					<li><a href="#" class="tooltip">Media</a></li> 
					<li><a href="#" class="tooltip">Something else</a></li> 
				</ul> 
			</div> 
			<!-- / Toolbar actions --> 
 
 
			<!-- Inner Content --> 
			<div id="innerContent"> 
				<p class="intro"> 
					Welcome to Titanium, the bullet-proof admin panel ! Feel free to take a look around, or <a href="#" class="features">click here</a> for a complete list of features. 
				</p> 
				<hr/> 
 
				<!-- ListHeader --> 
				<div id="listHeader"> 
					<p class="listInfos"> 
						You have 12 posts in 5 categories. 
					</p> 
					<div class="listActions"> 
						<form action="" method="post"> 
							<label for="actionSelect">With selected items: </label> 
							<select class="select" name="actionSelect" id="actionSelect"> 
								<option>Edit</option> 
								<option>Duplicate</option> 
								<option>Delete</option> 
							</select> 
							<button class="button small-button"><strong>Apply</strong></button> 
						</form> 
					</div> 
				</div> 
				<!-- /ListHeader --> 
 
				<!-- ListTable --> 
				<table cellspacing="0" class="listTable" id="postList"> 
					<!-- Thead --> 
					<thead> 
						<tr> 
							<th class="first"><div></div></th> 
							<th><a href="#" title="Post">Post</a></th> 
							<th><a href="#" title="Author">Author</a></th> 
							<th><a href="#" title="Categories">Categories</a></th> 
							<th class="last"><a href="#" title="Date">Date</a></th> 
						</tr> 
					</thead> 
					<!-- /Thead --> 
					<!-- Tfoot --> 
					<tfoot> 
						<tr> 
							<td colspan="5"> 
								<div class="inner"> 
									<div class="paginate"> 
										<span class="prev disabled"><a href="#">&lt;&lt;</a></span> 
										<span><a href="#">1</a></span> 
										<span>...</span> 
										<span><a href="#">4</a></span> 
										<span class="current roundedBordersLite">5</span> 
										<span><a href="#">6</a></span> 
										<span>...</span> 
										<span><a href="#">11</a></span> 
										<span class="next"><a href="#">&gt;&gt;</a></span> 
									</div> 
								</div> 
							</td> 
						</tr> 
					</tfoot> 
					<!-- /Tfoot --> 
					<!-- Tbody --> 
					<tbody> 
						<tr> 
							<td><input type="checkbox" class="checkbox"/></td> 
							<td><a href="#" title="Lorem Ipsum">Lorem ipsom dolor sit amet</a></td> 
							<td><a href="#" title="Lorem Ipsum">Alice</a></td> 
							<td><a href="#" title="Lorem Ipsum">Movies</a></td> 
							<td class="last">03/12/2009</td> 
						</tr> 
						<tr> 
							<td><input type="checkbox" class="checkbox"/></td> 
							<td><a href="#" title="Lorem Ipsum">Cras ornare tristique elit</a></td> 
							<td><a href="#" title="Lorem Ipsum">Bob</a></td> 
							<td><a href="#" title="Lorem Ipsum">Movies, Music</a></td> 
							<td class="last">03/01/2009</td> 
						</tr> 
						<tr> 
							<td><input type="checkbox" class="checkbox"/></td> 
							<td><a href="#" title="Lorem Ipsum">Cras ornare tristique elit</a></td> 
							<td><a href="#" title="Lorem Ipsum">Carl</a></td> 
							<td><a href="#" title="Lorem Ipsum">Movies, Music</a></td> 
							<td class="last">02/22/2009</td> 
						</tr> 
						<tr> 
							<td><input type="checkbox" class="checkbox"/></td> 
							<td><a href="#" title="Lorem Ipsum">Cras ornare tristique elit</a></td> 
							<td><a href="#" title="Lorem Ipsum">David</a></td> 
							<td><a href="#" title="Lorem Ipsum">Movies, Music</a></td> 
							<td class="last">02/16/2009</td> 
						</tr> 
						<tr> 
							<td><input type="checkbox" class="checkbox"/></td> 
							<td><a href="#" title="Lorem Ipsum">Cras ornare tristique elit</a></td> 
							<td><a href="#" title="Lorem Ipsum">Eric</a></td> 
							<td><a href="#" title="Lorem Ipsum">Movies, Music</a></td> 
							<td class="last">02/14/2009</td> 
						</tr> 
						<tr> 
							<td><input type="checkbox" class="checkbox"/></td> 
							<td><a href="#" title="Lorem Ipsum">Integer vitae libero ac risus egestas placerat</a></td> 
							<td><a href="#" title="Lorem Ipsum">Frank</a></td> 
							<td><a href="#" title="Lorem Ipsum">Concerts, Music</a></td> 
							<td class="last">02/12/2009</td> 
						</tr> 
					</tbody> 
					<!-- /Tbody --> 
				</table> 
				<!-- /ListTable --> 
 
 
				<!-- Form --> 
				<form action="#" method="post"> 
					<fieldset> 
						<legend>Normal fieldset</legend> 
 
						<div class="field required"> 
							<label for="field1c">Field 1</label> 
							<input type="text" class="text" name="field1c" id="field1c" title="Fusce elementum"/> 
							<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span> 
						</div> 
						<div class="field"> 
							<label for="field2c">Field 2</label> 
							<input type="text" class="text" name="field2c" id="field2c"/> 
						</div> 
					</fieldset> 
 
					<div class="fieldset fieldsetBlock active tabs"> 
						<div class="header"> 
							<h3>Tabbed fieldsets</h3> 
						</div> 
						<div class="tabs"> 
							<ul class="clearfix"> 
								<li><a href="#fieldset1" title="Write post"><span>Post Content</span></a></li> 
								<li><a href="#fieldset2" title="Post date"><span>Time &amp; Date</span></a></li> 
							</ul> 
							<fieldset id="fieldset1" > 
								<legend>Post content</legend> 
								<div class="field field-error required"> 
									<label for="field1b">Post Title</label> 
									<input type="text" class="text" name="field1b" id="field1b" title="Fusce elementum"/> 
									<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span> 
									<span class="error-hint">This field cannot be blank</span> 
								</div> 
								<div class="field"> 
									<label for="field2b">Subtitle</label> 
									<input type="text" class="text" name="field2b" id="field2b"/> 
								</div> 
								<div class="field required"> 
									<label for="field3b">Another required field</label> 
									<input type="text" class="text" name="field2b" id="field3b"/> 
									<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span> 
								</div> 
								<div class="field required"> 
									<label for="field4b">Content</label> 
									<textarea rows="10" cols="10" name="field4b" id="field4b"></textarea> 
									<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span> 
								</div> 
							</fieldset> 
 
							<fieldset id="fieldset2"> 
								<legend>Date</legend> 
								<div class="sub"> 
									<!-- ListTable --> 
									<table cellspacing="0" class="listTable dateTable hoverCell"> 
										<!-- Thead --> 
										<thead> 
											<tr> 
												<th class="first"><div>S</div></th> 
												<th>M</th> 
												<th>T</th> 
												<th>W</th> 
												<th>T</th> 
												<th>F</th> 
												<th class="last">S</th> 
											</tr> 
										</thead> 
										<!-- /Thead --> 
										<!-- Tfoot --> 
										<tfoot> 
											<tr> 
												<td colspan="7"> 
													<div class="inner"> 
														<a href="#" title="Previous">&lt;&lt;</a> 
														March 2009
														<a href="#" title="Next">&gt;&gt;</a> 
													</div> 
												</td> 
											</tr> 
										</tfoot> 
										<!-- /Tfoot --> 
										<!-- Tbody --> 
										<tbody> 
											<tr> 
												<td><a href="#">&nbsp;</a></td> 
												<td><a href="#">&nbsp;</a></td> 
												<td><a href="#">1</a></td> 
												<td><a href="#">2</a></td> 
												<td><a href="#">3</a></td> 
												<td><a href="#">4</a></td> 
												<td class="last"><a href="#">5</a></td> 
											</tr> 
											<tr> 
												<td><a href="#">6</a></td> 
												<td><a href="#">7</a></td> 
												<td><a href="#">8</a></td> 
												<td><a href="#">9</a></td> 
												<td><a href="#">10</a></td> 
												<td><a href="#">11</a></td> 
												<td class="last"><a href="#">12</a></td> 
											</tr> 
											<tr> 
												<td><a href="#">13</a></td> 
												<td><a href="#">14</a></td> 
												<td><a href="#">15</a></td> 
												<td><a href="#">16</a></td> 
												<td><a href="#">17</a></td> 
												<td><a href="#">18</a></td> 
												<td class="last"><a href="#">19</a></td> 
											</tr> 
											<tr> 
												<td><a href="#">20</a></td> 
												<td><a href="#">21</a></td> 
												<td><a href="#">22</a></td> 
												<td><a href="#">23</a></td> 
												<td><a href="#">24</a></td> 
												<td><a href="#">25</a></td> 
												<td class="last"><a href="#">26</a></td> 
											</tr> 
											<tr> 
												<td><a href="#">27</a></td> 
												<td><a href="#">28</a></td> 
												<td><a href="#">29</a></td> 
												<td><a href="#">30</a></td> 
												<td><a href="#">31</a></td> 
												<td><a href="#">&nbsp;</a></td> 
												<td class="last"><a href="#">&nbsp;</a></td> 
											</tr> 
										</tbody> 
										<!-- /Tbody --> 
									</table> 
									<!-- /ListTable --> 
								</div> 
							</fieldset> 
						</div> 
					<span class="bBR"></span> 
					</div> 
				</form> 
				<!-- /Form --> 
 
				<div class="message message-error"> 
					<h6>Required field missing</h6> 
					<p>Please fill in all required fields. </p> 
					<a href="#" title="Close this message" class="close icon icon_close"></a> 
				</div> 
 
				<div class="message message-success"> 
					<h6>Operation succesful</h6> 
					<p>Everything's going according to plan.</p> 
					<a href="#" title="Close this message" class="close icon icon_close tooltip"></a> 
				</div> 
 
				<div class="message message-notice"> 
					<h6>Warning</h6> 
					<p>Things could be better, but then again it's not the end of the world. </p> 
					<a href="#" title="Close this message" class="close icon icon_close tooltip"></a> 
				</div> 
 
 
				<h1>Header level 1</h1> 
				<p> 
					<strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.
				</p> 
 
				<h2>Header Level 2</h2> 
				<ol> 
					<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
					<li>Aliquam tincidunt mauris eu risus.</li> 
				</ol> 
				<blockquote> 
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p> 
				</blockquote> 
 
				<h3>Header Level 3</h3> 
				<ul> 
					<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
					<li>Aliquam tincidunt mauris eu risus.</li> 
				</ul> 
			</div> 
			<!-- /Inner Content --> 
			<div class="bBottom"><div></div></div> 
		</div> 
		<!-- /Content --> 
 
		<!-- Dialog boxes --> 
	<%--	<div class="dialogs"> 
			<div id="welcome" title="Welcome to Titanium"> 
				<div class="content">These dialog windows can be used to give hints to new users. </div> 
				<div class="bBottom"><div></div></div> 
			</div> 
		
 
			<div id="features" title="Features List"> 
				<div class="content"> 
					<h4>Elements</h4> 
					<ul> 
						<li>Two types of buttons with active, inactive, and hover states</li> 
						<li>Table</li> 
						<li>Pagination</li> 
						<li>Search field</li> 
						<li>Tooltips</li> 
						<li>Modal dialogs</li> 
						<li>Tabs</li> 
						<li>Calendar</li> 
						<li>Success, Notice, and Error messages</li> 
						<li>Normal, required, and error text fields</li> 
					</ul> 
	
					<h4>Graphics</h4> 
					<ul> 
						<li>Pre-sliced photoshop file means you can quickly create a new skin with different colors</li> 
						<li>4 pre-existing color variants: blue, grey, orange, and green</li> 
					</ul> 
	
					<h4>Markup &amp; CSS</h4> 
					<ul> 
						<li>Uses CSS sprites which makes the page load faster by requiring only one http request</li> 
						<li>Transparent PNGs let you easily change the background colors (and even works in IE 6)</li> 
						<li>Standard compliant XHTML and CSS</li> 
						<li>Separate CSS files for easy theming</li> 
					</ul> 
	
					<h4>Javascript</h4> 
					<ul> 
						<li>Uses the lightweight Jquery javascript library with the Jquery UI extension</li> 
						<li>Dynamic expandable menu</li> 
						<li>Sortable items lists (<a href="http://tablesorter.com/" title="Tablesorter">Tablesorter</a>)</li> 
						<li>Tooltips (<a href="http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/" title="Jquery tooltip">Jquery tooltip)</a></li> 
						<li>Modal dialogs (Jquery UI)</li> 
						<li>Tabs (Jquery UI)</li> 
					</ul> 
				</div> 
				<div class="bBottom"><div></div></div> 
			</div> 
		</div> --%>
		<!-- /Dialog boxes --> 
	</div> 
</div> 
 
 <div class="Bannner"> asdasdasd asdsad</div>
 
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.7.custom.min.js"></script> 
<script type="text/javascript" src="js/jquery.bgiframe.min.js"></script> 
<script type="text/javascript" src="js/jquery.dimensions.js"></script> 
<script type="text/javascript" src="js/jquery.tooltip.min.js"></script> 
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script> 
<script type="text/javascript" src="js/titanium.js"></script> 
 
 
    </form>
</body>
</html>
